<template>
  <div class="w-1200 page-m-center">
    <div class="home-title flex-center-wrap flex-justify-between">
      <div class="flex-center-wrap p-l-2">
        <zl-icon
          icon="icon-zuixinwenda"
          :icon-style="{
            width: '28px',
            height: '28px',
            fontSize: '28px'
          }"
        ></zl-icon>
        <h3>
          最新问答
        </h3>
      </div>

      <a class="all-info cu" v-if="this.list.length > 4" :href="parseFullPath('/dayi/')" @click.prevent="goAll">
        <span>
          全部
        </span>
        <i class="el-icon-arrow-right"></i>
      </a>
    </div>

    <div class="list flex-wrap flex-justify-between flex-multi-row">
      <a
        :href="parseFullPath(getUrl(item))"
        @click="goToDetail($event, item)"
        class="item"
        v-for="(item, index) in listMax"
        :key="index"
      >
        <span class="item-title ell-1 d-b">
          {{ item.question }}
        </span>
        <span class="item-content d-b">
          {{ item.reply_info }}
        </span>
        <time class="item-time">
          {{ item.create_time }}
        </time>
      </a>
    </div>
  </div>
</template>

<script>
import zlIcon from './zlIcon.vue'
export default {
  components: {
    'zl-icon': zlIcon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  computed: {
    listMax() {
      // 前4个
      return this.list.slice(0, 4)
    }
  },
  methods: {
    goAll() {
      this.goTo('/dayi/', {
        target: '_blank',
        watch: true
      })
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    getUrl(item) {
      //   console.log(location);
      let mapId = item.map_id || item.object_id
      //   return location.origin + '/dayi/' + mapId + item.s_p_t + '.html'
      return '/dayi/' + mapId + item.s_p_t + '.html'
    },
    //查看问题详情
    goToDetail(event, item) {
      event.preventDefault()
      this.zlaBtn = {
        key_name: '最新问答',
        key_content: '最新问答'
      }
      if (this.isClickDetail) return
      if (!this.isClickDetail) this.isClickDetail = true
      //帖子答疑
      let params = {}
      if (+item.is_unread > 0) params.is_unread = 1
      let mapId = item.map_id || item.object_id
      let url = '/dayi/' + mapId + item.s_p_t + '.html'
      '/dayi/' + mapId + item.s_p_t + '.html'
      //s_p_t只会取值1（帖子答疑），2（对话答疑），因服务端渲染，不允许代参，代参不利于SEO
      this.goTo(url, {
        query: params,
        target: '_blank',
        watch: true
      })
      setTimeout(() => {
        this.isClickDetail = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.page-m-center {
  text-align: center;
}


h3 {
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
  margin-left: 9px;
}
.list {
  padding-bottom: 30px;
}
.item {
  display: block;
  margin-top: 20px;
  width: 590px;
  height: 183px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px #f0f0f0;
  border-radius: 12px;
  padding: 30px;
  text-decoration: none;
}
.item-title {
  text-align: left;
  width: 530px;
  height: 26px;
  font-size: 18px;
  font-weight: 500;
  color: #383838;
  line-height: 26px;
}
.item-content {
  text-align: left;
  margin-top: 16px;
  width: 530px;
  height: 48px;
  overflow-y: auto;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}

.item-content::-webkit-scrollbar {
  width: 4px !important;
}
.item-content::-webkit-scrollbar-thumb {
  border-radius: 2px !important;
  background: #b3b3b3 !important;
  box-shadow: none !important;
}
.item-content::-webkit-scrollbar-track {
background: #F2F2F2;
}

.item-time {
  text-align: left;
  display: block;
  margin-top: 14px;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.all-info {
  text-decoration: none;
  padding-right: 10px;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.p-l-2 {
  padding-left: 2px;
}
</style>
